<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    @if (!courseContentsPage) {
        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
        </ion-button>
    } @else {
        <core-context-menu>
            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
                iconAction="fas-circle-info" />
        </core-context-menu>
    }
</core-navbar-buttons>

<core-loading [hideUntil]="!showLoading">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
        @if (assign && assign.introattachments?.length && !assign.submissionattachments) {
            <div description>
                <core-file *ngFor="let file of assign.introattachments" [file]="file" [component]="component" [componentId]="componentId" />
            </div>
        }
    </core-course-module-info>

    <!-- User can view all submissions (teacher). -->
    @if (assign && canViewAllSubmissions) {

        <ion-list class="core-list-align-detail-right">

            <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)" [courseId]="courseId" />

            <ion-item class="ion-text-wrap">
                <ion-label>
                    <p class="item-heading">{{ 'core.course.hiddenfromstudents' | translate }}</p>
                    @if (module.visible) {
                        <p>{{ 'core.no' | translate }}</p>
                    } @else {
                        <p>{{ 'core.yes' | translate }}</p>
                    }
                </ion-label>
            </ion-item>

            @if (timeRemaining) {
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.mod_assign.timeremaining' | translate }}</p>
                        <p>{{ timeRemaining }}</p>
                    </ion-label>
                </ion-item>
            }
            @if (lateSubmissions) {
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.mod_assign.latesubmissions' | translate }}</p>
                        <p>{{ lateSubmissions }}</p>
                    </ion-label>
                </ion-item>
            }

            @if (summary) {
                @if (summary.participantcount) {
                    <!-- Summary of all submissions. -->
                    <ion-item class="ion-text-wrap" (click)="goToSubmissionList()" [detail]="true" button>
                        <ion-label>
                            @if (assign.teamsubmission) {
                                <p class="item-heading">{{ 'addon.mod_assign.numberofteams' | translate }}</p>
                            } @else {
                                <p class="item-heading">{{ 'addon.mod_assign.numberofparticipants' | translate }}</p>
                            }
                        </ion-label>
                        <ion-badge slot="end" color="primary">
                            <span aria-hidden="true">{{ summary.participantcount }}</span>
                            @if (!assign.teamsubmission) {
                                <span class="sr-only">
                                    {{ 'addon.mod_assign.numberofparticipantscountdescription' |
                                    translate:{count: summary.participantcount} }}
                                </span>
                            } @else {
                                <span class="sr-only">
                                    {{ 'addon.mod_assign.numberofteamscountdescription' | translate:{count: summary.participantcount} }}
                                </span>
                            }
                        </ion-badge>
                    </ion-item>
                }

                @if (summary.submissionsenabled) {
                    @if (assign.submissiondrafts) {
                        <!-- Summary of submissions with draft status. -->
                        <ion-item class="ion-text-wrap" [class.hide-detail]="!summary.submissiondraftscount" [detail]="true"
                            [button]="summary.submissiondraftscount"
                            (click)="goToSubmissionList(submissionStatusDraft, !!summary.submissiondraftscount)">
                            <ion-label>
                                <p class="item-heading">{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</p>
                            </ion-label>
                            <ion-badge slot="end" color="primary">
                                <span aria-hidden="true">{{ summary.submissiondraftscount }}</span>
                                <span class="sr-only">
                                    {{ 'addon.mod_assign.numberofdraftsubmissionscountdescription' | translate:
                        {count: summary.submissiondraftscount} }}
                                </span>
                            </ion-badge>
                        </ion-item>
                    }

                    <!-- Summary of submissions with submitted status. -->
                    <ion-item class="ion-text-wrap" [class.hide-detail]="!summary.submissionssubmittedcount" [detail]="true"
                        [button]="summary.submissionssubmittedcount"
                        (click)="goToSubmissionList(submissionStatusSubmitted, !!summary.submissionssubmittedcount)">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</p>
                        </ion-label>
                        <ion-badge slot="end" color="primary">
                            <span aria-hidden="true">{{ summary.submissionssubmittedcount }}</span>
                            <span class="sr-only">
                                {{ 'addon.mod_assign.numberofsubmittedassignmentscountdescription' | translate:
                        {count: summary.submissionssubmittedcount} }}
                            </span>
                        </ion-badge>
                    </ion-item>

                    @if (!assign.teamsubmission) {
                        <!-- Summary of submissions that need grading. -->
                        <ion-item class="ion-text-wrap" [class.hide-detail]="!needsGradingAvailable" [detail]="true"
                            [button]="needsGradingAvailable" (click)="goToSubmissionList(needGrading, needsGradingAvailable)">
                            <ion-label>
                                <p class="item-heading">{{ 'addon.mod_assign.numberofsubmissionsneedgrading' | translate }}</p>
                            </ion-label>
                            <ion-badge slot="end" color="primary">
                                <span aria-hidden="true">{{ summary.submissionsneedgradingcount }}</span>
                                <span class="sr-only">
                                    {{ 'addon.mod_assign.numberofsubmissionsneedgradingcountdescription' | translate:
                        {count: summary.submissionsneedgradingcount} }}
                                </span>
                            </ion-badge>
                        </ion-item>
                    }
                }
            }
        </ion-list>

        <!-- Ungrouped users. -->
        @if (assign.teamsubmission && summary && summary.warnofungroupedusers) {
            <ion-card class="core-info-card">
                <ion-item>
                    <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
                    <ion-label>{{ 'addon.mod_assign.'+summary.warnofungroupedusers | translate }}</ion-label>
                </ion-item>
            </ion-card>
        }

        @if (!showLoading) {
            <div collapsible-footer slot="fixed">
                <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
            </div>
        }

    }

    <!-- If it's a student, display his submission. -->
    @if (!showLoading && !canViewAllSubmissions && canViewOwnSubmission) {
        <addon-mod-assign-submission [courseId]="courseId" [moduleId]="module.id" />
    }
</core-loading>
